<template>
  <div class="headerBar">
    <div class="bar-name">
      <span>智慧体育平台</span>
    </div>
    <div class="bar-slide-bar">
      <el-menu :active-text-color="'#1677FF'" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item @click="changeRouter('/course')" index="1">智慧体育课堂</el-menu-item>
        <el-menu-item @click="changeRouter('/sportwork')" index="2">体育作业</el-menu-item>
        <el-menu-item @click="changeRouter('/play')" index="3">体育云赛事</el-menu-item>
      </el-menu>
    </div>
    <div class="bar-help" v-if="false">
      <span>帮助中心</span>
    </div>
    <div class="bar-message">
      <div class="bar-img" v-if="this.$store.state.user.USER_INFO.pic" >
        <img  :src="$store.state.user.BASE_URL + $store.state.user.USER_INFO.pic" alt="">
      </div>
      <span class="teacher-name">
        {{this.$store.state.user.USER_INFO.username}}
      </span>
      <el-dropdown>
        <i class="iconfont icon-youjiantou"></i>
        <el-dropdown-menu slot="dropdown">
          <div @click="changePass">
            <el-dropdown-item>
              <div >修改密码</div>
            </el-dropdown-item>
          </div>
          <div @click="logout">
            <el-dropdown-item>
              <div >退出登录</div>
            </el-dropdown-item>
          </div>

        </el-dropdown-menu>
      </el-dropdown>
      <changePassModal  @close="closePass" v-if="dialogVisible" :dialogVisible="dialogVisible"  />
    </div>
  </div>
</template>

<script>
import changePassModal from "@/layoutHeader/components/headerBar/changePassModal";
import router from "@/router";
export default {
  name: "index.vue",
  data(){
    return{
      activeIndex: '1',
      dialogVisible:false
    }
  },
  watch:{
    '$route'(){
      this.initActive()
    }
  },
  components:{
    changePassModal
  },
  created() {
    this.initActive()
  },
  methods: {
    closePass(){
      this.dialogVisible = false
    },
    changePass(){
      this.dialogVisible = true
    },
    async logout() {
      // await this.$store.dispatch('user/logout')
      this.$confirm('确定要退出登录吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch("user/logout").then(()=>{
          this.$router.push(`/`);
          this.$message.success("退出成功")
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出'
        });
      });

    },
    initActive(){
      let layOutHeader = router.options.routes.filter(item=> item.component && item.component.name && (item.component.name == 'LayoutHeader'));
      let childrenComponent = layOutHeader.map(item=> item.children.length && item.children[0]);
      let [active] = childrenComponent.filter(item=> item.path == this.$route.path);
      this.activeIndex = active.active

    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    changeRouter(name){
      if(this.$route.path !== name){
        this.$router.push(name)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .headerBar {
    height: 7vh;
    display: flex;
    .bar-name {
      display: flex;
      align-items: center;
      color:#1677FF ;
      font-size: 1.7vw;
      padding-left: 1vw;
      box-sizing: border-box;
      font-weight: 700;
      white-space: nowrap;
    }
    .bar-slide-bar {
      width: 40%;
      margin-left:10%;
      ::v-deep .el-menu {
        height: 100%;
        border: none;
      }
      ::v-deep .el-menu-item {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        margin-left: 1vw;
        font-size: 1.1vw;
      }
    }
    .bar-help {
      width: 10%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size:1vw;
      color: #666666;
      margin-left: 20%;
    }
    .bar-message {
      margin-left: 25%;
      width: 10%;
      display: flex;
      align-items: center;
      .bar-img {
        width: 3vw;
        height: 3vw;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      span {
        font-size: 1.05vw;
        color: #333333;
        margin-left: 1vw;
        white-space: nowrap;
      }
    }
    i{
      font-size: 1.25vw;
      color: #7a7b7b;
      font-weight: bold;
      cursor: pointer;
    }
  }
</style>
